import 'package:study_online/utils/myBoxAnimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screen_util.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black26,
          title: Text('container'),
        ),
        body: RecommendSkeleton(),
      ),
    );
  }
}


class RecommendSkeleton extends StatefulWidget {
  @override
  _RecommendSkeletonState createState() => _RecommendSkeletonState();
}

class _RecommendSkeletonState extends State<RecommendSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height
      ),
      designSize: Size(1080,2340),
    );
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          color: Colors.white,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: ScreenUtil().setWidth(1040),
                  height: ScreenUtil().setHeight(359),
                  decoration: myBoxDec(animation),
                ),
                Container(
                  height: ScreenUtil().setHeight(204),
                  margin: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(67),
                    ScreenUtil().setHeight(59),
                    ScreenUtil().setWidth(67),
                    ScreenUtil().setHeight(0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: ScreenUtil().setHeight(204),
                        width: ScreenUtil().setWidth(138),
                        child: Column(
                          children: [
                            Container(
                              width: ScreenUtil().setWidth(138),
                              height: ScreenUtil().setWidth(138),
                              decoration: myBoxDec(animation,isCircle:true),
                            ),
                            Expanded(
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  height: ScreenUtil().setHeight(29),
                                  width: ScreenUtil().setWidth(100),
                                  decoration: myBoxDec(animation),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        height: ScreenUtil().setHeight(204),
                        width: ScreenUtil().setWidth(138),
                        child: Column(
                          children: [
                            Container(
                              width: ScreenUtil().setWidth(138),
                              height: ScreenUtil().setWidth(138),
                              decoration: myBoxDec(animation,isCircle:true),
                            ),
                            Expanded(
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  height: ScreenUtil().setHeight(29),
                                  width: ScreenUtil().setWidth(100),
                                  decoration: myBoxDec(animation),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        height: ScreenUtil().setHeight(204),
                        width: ScreenUtil().setWidth(138),
                        child: Column(
                          children: [
                            Container(
                              width: ScreenUtil().setWidth(138),
                              height: ScreenUtil().setWidth(138),
                              decoration: myBoxDec(animation,isCircle:true),
                            ),
                            Expanded(
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  height: ScreenUtil().setHeight(29),
                                  width: ScreenUtil().setWidth(100),
                                  decoration: myBoxDec(animation),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        height: ScreenUtil().setHeight(204),
                        width: ScreenUtil().setWidth(138),
                        child: Column(
                          children: [
                            Container(
                              width: ScreenUtil().setWidth(138),
                              height: ScreenUtil().setWidth(138),
                              decoration: myBoxDec(animation,isCircle:true),
                            ),
                            Expanded(
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                  height: ScreenUtil().setHeight(29),
                                  width: ScreenUtil().setWidth(100),
                                  decoration: myBoxDec(animation),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: ScreenUtil().setHeight(71),
                  margin: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(40),
                    ScreenUtil().setHeight(67),
                    ScreenUtil().setWidth(40),
                    ScreenUtil().setHeight(0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: ScreenUtil().setWidth(286),
                        height: ScreenUtil().setHeight(71),
                        decoration: myBoxDec(animation),
                      ),
                      Container(
                        width: ScreenUtil().setWidth(213),
                        height: ScreenUtil().setHeight(46),
                        decoration: myBoxDec(animation),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(30),
                    ScreenUtil().setHeight(25),
                    ScreenUtil().setWidth(30),
                    ScreenUtil().setHeight(0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: ScreenUtil().setWidth(500),
                        height: ScreenUtil().setHeight(413),
                        decoration: myBoxDec(animation),
                      ),
                      Container(
                        width: ScreenUtil().setWidth(500),
                        height: ScreenUtil().setHeight(413),
                        decoration: myBoxDec(animation),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(30),
                    ScreenUtil().setHeight(25),
                    ScreenUtil().setWidth(30),
                    ScreenUtil().setHeight(0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: ScreenUtil().setWidth(500),
                        height: ScreenUtil().setHeight(413),
                        decoration: myBoxDec(animation),
                      ),
                      Container(
                        width: ScreenUtil().setWidth(500),
                        height: ScreenUtil().setHeight(413),
                        decoration: myBoxDec(animation),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: ScreenUtil().setHeight(71),
                  margin: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(40),
                    ScreenUtil().setHeight(67),
                    ScreenUtil().setWidth(40),
                    ScreenUtil().setHeight(0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Container(
                        width: ScreenUtil().setWidth(286),
                        height: ScreenUtil().setHeight(71),
                        decoration: myBoxDec(animation),
                      ),
                      Container(
                        width: ScreenUtil().setWidth(213),
                        height: ScreenUtil().setHeight(46),
                        decoration: myBoxDec(animation),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}


